<template>
  <div class="tab-bar">
    <van-tabbar v-model="currentIndex" active-color="var(--color)" route>
      <template v-for="(item, index) in TabBarData" :key="index">
        <van-tabbar-item replace :to="item.path">
          <span>{{ item.title }}</span>
          <template #icon>
            <img
              :src="currentIndex === index ? item.imgActive : item.img"
              :alt="item.title"
            />
          </template>
        </van-tabbar-item>
      </template>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { useRoute } from "vue-router";
import TabBarData from "../../assets/data/tabbar";
const currentIndex = ref(0);
const route = useRoute();
// console.log(route.path); 第一次会路由重定向 为 /
watch(route, (newRoute) => {
  // 监听到正确的路由链接
  // console.log(newRoute.path);
  // 获取到对应索引
  const index = TabBarData.findIndex((item) => item.path === newRoute.path);
  if (index == -1) return;
  // 设置索引
  currentIndex.value = index;
});
</script>

<style lang="less" scoped>
.tab-bar {
  // :deep(.class/#id) 找到子组件中对应的类并重写 在有scoped情况下
  img {
    height: 28px;
  }
}
</style>
